<template>
	<!-- 圈子首页页面 -->
	<view class="main">
		<view class="top">
			<view class="left_">
				<text>圈子</text>
				<view class="shu_xian">
				</view>
				<navigator url="/pages/index/search" class="right" hover-class="none">
					<image src="../../imges/seach.png" mode="aspectFill"></image>
				</navigator>
			</view>
			<navigator url="/pages/per_center/personalCenter" hover-class="none">
				<view class="right_">
					<image src="../../imges/wode_.png" mode="aspectFill"></image>
					<text>我的</text>
				</view>
			</navigator>
		</view>
		<view class="top1">
			<text>我加入的圈子</text>
			<text class="right" @click="handleLookZhe">...</text>
		</view>
		<view class="kong_" v-if="joinCircleList.length == 0">
			<image src="../../imges/quanzikong.png" mode="aspectFill"></image>
			<text>未加入圈子</text>
		</view>
		<!-- 轮播图部分 -->
		<view class="swiper" v-if="joinCircleList.length != 0">
			<swiper class="swiper1" indicator-dots="true" indicator-color="rgba(204,204,204,1)" indicator-active-color="#2168EB"
			 autoplay interval="5000" circular="true">
				<swiper-item v-for="(item,index) in joinCircleList" :key="index">
					<view class="father">
						<view v-for="(item1,index1) in item.name" :key="index1">
							<navigator :url="'/pages/index/detail?id='+ item1.id" hover-class="none" class="child" v-if="item1 != ''">
								<image :src="item1.orgUrl" mode="aspectFill"></image>
								<text>{{item1.orgName}}</text>
							</navigator>
							<navigator url="/pages/index/manage" hover-class="none" class="child6" v-if="item1 == ''">
								<image src="../../imges/Bitmap.png" mode="aspectFill"></image>
							</navigator>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 主体内容部分 -->
		<view class="content">
			<view :class="[scrollTop == true ? 'tab active66' : 'tab']">
				<view v-for="(item,index) in ['关注','探索','发现']" :key="index" :class="[activeTab == index ? 'active item' : 'item']"
				 @tap="handleTab(index)">
					{{item}}
					<!-- 下标显示 -->
					<view class="biao"></view>
				</view>
			</view>
			<!-- 没有帖子的空状态 关注圈子部分-->
			<view class="wu_Huo" v-if="activeTab == 0 && attentionList.length == 0">
				<image src="../../imges/wuhuodong.png" mode="aspectFill"></image>
				<text>暂无关注帖子</text>
			</view>
			<!-- 列表显示(关注) -->
			<view class="itemList" v-for="(item , index) in attentionList" :key="index" v-if="activeTab== 0">
				<!-- 下隔线 -->
				<view class="xian"></view>
				<!-- 顶部信息 -->
				<view class="top">
					<view class="left">
						<!-- 进个人信息页面 -->
						<navigator :url="'/pages/index/personal?id='+ item.createUid" hover-class="none">
							<view class="one">
								<image :src="item.avatarUrl" mode="aspectFill"></image>
							</view>
						</navigator>
						<!-- 进帖子详情 -->
						<navigator :url="'/pages/index/trickDetail?id='+ item.id" hover-class="none">
							<view class="two">
								<view class="top1">
									<text class="name">{{item.userName}}</text>
								</view>
								<view class="bottom1">
									{{item.createTime}}
								</view>
							</view>
						</navigator>
					</view>
					<view class="right" @tap="showZhi(index)">
						<view class="one">
							...
						</view>
						<view class="two">
							<image src="@/imges/zhiding.png" mode="aspectFill" class="zhiding" v-if="item.isTop == 1"></image>
							<image src="@/imges/jing.png" mode="aspectFill" class="jinghua" v-if="item.isEssences == 1"></image>
						</view>
						<!-- 帖子弹窗 -->
						<view :class="[item.isTop == 0 && item.isEssences == 0  ? 'three66 three88' : 'three66']" v-if="item.is_show">
							<view class="jiao">
							</view>
							<navigator :url="'/pages/my_circle/report?id='+ item.id" class="one1" hover-class="none" v-if="item.isSelf == 0">
								举报
							</navigator>
							<navigator :url="'/pages/newPost/newEditor?id=' + item.id" class="one1" hover-class="none" v-if="item.isSelf == 1">
								编辑
							</navigator>
							<view class="one1" hover-class="none" v-if="item.isSelf == 1" @tap.stop="hanldeDelete(item.id,item.orgId)">
								删除
							</view>
						</view>
					</view>
				</view>
				<!-- 中间内容 及图片 -->
				<!-- 进贴子详情 -->
				<navigator :url="'/pages/index/trickDetail?id='+ item.id" hover-class="none">
					<view class="text_">
						{{item.content}} <text v-if="item.is_content">...</text><text v-if="item.is_content" class="quan">全文</text>
					</view>
				</navigator>
				<!-- 图片显示 -->
				<view class="imgs">
					<image :src="item1.fileUrl" mode="aspectFill" v-for="(item1,index1) in item.imgCollection" :key="index1" v-if="item.imgCollection.length > 1 && item1.fileType == 1 && !item.is_video"
					 @tap="imgsDa(item.imgCollection,index1)"></image>
					<image class="myVideo" :src="item.imgCollection[0].fileUrl" mode="aspectFill" v-if="item.imgCollection.length == 1 && item.imgCollection[0].fileType == 1"
					 @tap="imgsDa(item.imgCollection,0)"></image>
					<video class="myVideo" :src="item.imgCollection[0].fileUrl" object-fit="cover" controls :poster="item.imgCollection[0].firstUrl"
					 :duration="item.imgCollection[0].videoTime" v-if="item.imgCollection.length == 1 && item.imgCollection[0].fileType == 3"></video>
					<video class="myVideo" :src="item6.fileUrl" object-fit="cover" controls :poster="item6.firstUrl" :duration="item6.videoTime"
					 v-for="(item6,index1) in item.imgCollection" :key="index1" v-if="item.imgCollection.length > 1 && item6.fileType == 3 && item.is_video"></video>
				</view>
				<!-- 进去圈子入口 -->
				<navigator :url="'/pages/index/detail?id='+ item.orgId" hover-class="none" @click.native.stop>
					<view class="circle">
						<view class="left">
							<view class="one">
								<image :src="item.orgUrl" mode="aspectFill"></image>
							</view>
							<view class="two">
								<view class="top">
									{{item.orgName}}
								</view>
								<view class="bottom">
									成员&nbsp;{{item.userCount}}
									&nbsp;&nbsp;
									帖子&nbsp;{{item.postCount}}
								</view>
							</view>
						</view>
						<view class="right">
							进入圈子
						</view>
					</view>
				</navigator>
				<!-- 点赞评论 -->
				<view class="commit">
					<navigator :url="'/pages/index/trickDetail?id=' + item.id + '&type=2'" hover-class="none">
						<view class="left">
							<image :src="item2" mode="aspectFill" v-for="(item2,index2) in item.thumbsList" :key="index2"></image>
							<!-- 已赞显示 -->
							<text v-if="item.thumbsList.length == 5">已赞</text>
							<text v-if="item.thumbsList.length == 4" class="four">已赞</text>
							<text v-if="item.thumbsList.length == 3" class="three">已赞</text>
							<text v-if="item.thumbsList.length == 2" class="two">已赞</text>
							<text v-if="item.thumbsList.length == 1" class="one">已赞</text>
						</view>
					</navigator>
					<view class="right">
						<view class="one">
							<image src="../../imges/zan.png" mode="aspectFill" v-if="item.isThumbs == 1" @tap="handleLike(item.id, 1,0)"></image>
							<image src="../../imges/zan1.png" mode="aspectFill" v-if="item.isThumbs == 0" @tap="handleLike(item.id,0,0)"></image>
							&nbsp;<text>{{item.thumbsCount}}</text>
						</view>
						&nbsp;&nbsp;
						<navigator :url="'/pages/index/trickDetail?id=' + item.id" class="two" hover-class="none">
							<image src="../../imges/pinglun.png" mode="aspectFill"></image>
							&nbsp;<text>{{item.commentsCount}}</text>
						</navigator>
					</view>
				</view>
				<!-- 评论列表 -->
				<!-- 进帖子详情 -->
				<navigator :url="'/pages/index/trickDetail?id='+ item.id" hover-class="none" v-if="item.comments.length != 0">
					<view class="commit_list">
						<view class="item" v-for="(item6,index3) in item.comments" :key="index3">
							<text :class="[item6.realName.length > 5 &&  item6.picturesUrl.length > 0 ? 'name name1' : 'name']">{{item6.realName}}</text>
							<view class="img" v-if="item6.picturesUrl.length > 0">
								<image src="../../imges/chaimg.png" mode="aspectFill"></image> <text>查看图片</text>
							</view>
							<text class="t_comm">{{item6.content}}</text>
						</view>
						<view class="footer" v-if="item.commentsCount != 0">
							查看全部{{item.commentsCount}}条评论及回复 <text>></text>
						</view>
					</view>
				</navigator>
			</view>
			<!-- 没有帖子的空状态 探索圈子部分-->
			<view class="wu_Huo" v-if="activeTab == 1 && exploreList.length == 0">
				<image src="../../imges/wuhuodong.png" mode="aspectFill"></image>
				<text>暂无帖子</text>
			</view>
			<!-- 列表显示(关注 探索) -->
			<view class="itemList" v-for="(item , index) in exploreList" :key="index" v-if="activeTab== 1">
				<!-- 下隔线 -->
				<view class="xian"></view>
				<!-- 顶部信息 -->
				<view class="top">
					<view class="left">
						<!-- 进个人信息页面 -->
						<navigator :url="'/pages/index/personal?id=' + item.createUid" hover-class="none">
							<view class="one">
								<image :src="item.createUhead" mode="aspectFill"></image>
							</view>
						</navigator>
						<!-- 进帖子详情 -->
						<navigator :url="'/pages/index/trickDetail?id='+ item.msgId" hover-class="none">
							<view class="two">
								<view class="top1">
									<text class="name">{{item.createUname}}</text> <text>{{item.companyName}}</text>
								</view>
								<view class="bottom1">
									{{item.createTime}}
								</view>
							</view>
						</navigator>
					</view>
					<view class="right" @tap="showZhi(index)">
						<view class="one">
							...
						</view>
						<!-- 帖子弹窗 -->
						<view class="three66 three88" v-if="item.is_show">
							<view class="jiao">
							</view>
							<view hover-class="none" class="one1" v-if="activeTab == 1" @tap.stop="handleunConcern(item.msgId)">不感兴趣</view>
							<navigator :url="'/pages/my_circle/report?id='+ item.msgId" class="one1" hover-class="none">
								举报
							</navigator>
						</view>
					</view>
				</view>
				<!-- 中间内容 及图片 -->
				<!-- 进贴子详情 -->
				<navigator :url="'/pages/index/trickDetail?id='+ item.msgId" hover-class="none">
					<view class="text_">
						{{item.content}} <text v-if="item.is_content">...</text><text v-if="item.is_content" class="quan">全文</text>
					</view>
				</navigator>
				<!-- 图片显示 -->
				<view class="imgs">
					<!-- 多张照片 -->
					<image :src="item1.fileUrl" mode="aspectFill" v-for="(item1,index1) in item.postImgDtoList" :key="index1" v-if="item1.fileType == 1 && item.postImgDtoList.length > 1  && !item.is_video"
					 @tap="imgsDa(item.postImgDtoList,index1)"></image>

					<!-- 一张或者一个视频 -->
					<image class="myVideo" :src="item.postImgDtoList[0].fileUrl" mode="aspectFill" v-if="item.postImgDtoList.length == 1 && item.postImgDtoList[0].fileType == 1"
					 @tap="imgsDa(item.postImgDtoList,0)"></image>

					<video class="myVideo" :src="item.postImgDtoList[0].fileUrl" object-fit="cover" controls :poster="item.postImgDtoList[0].firstUrl"
					 :duration="item.postImgDtoList[0].videoTime" v-if="item.postImgDtoList.length == 1 && item.postImgDtoList[0].fileType == 3"></video>

					<video class="myVideo" :src="item6.fileUrl" v-for="(item6,index1) in item.postImgDtoList" :key="index1" :poster="item6.firstUrl"
					 :duration="item6.videoTime" object-fit="cover" controls v-if="item.postImgDtoList.length > 1 && item6.fileType == 3 && item.is_video"></video>
				</view>
				<!-- 进去圈子入口 -->
				<navigator :url="'/pages/index/detail?id='+ item.orgId" hover-class="none" @click.native.stop>
					<view class="circle circle1">
						<view class="left">
							<view class="one">
								<image :src="item.orgUrl" mode="aspectFill"></image>
							</view>
							<view class="two">
								<view class="top">
									{{item.orgName}}
								</view>
								<view class="bottom">
									成员&nbsp;{{item.memberNum}}
									&nbsp;&nbsp;
									帖子&nbsp;{{item.postNum}}
								</view>
							</view>
						</view>
						<view class="right1">
							加入圈子
						</view>
					</view>
				</navigator>
				<!-- 点赞评论 -->
				<view class="commit">
					<navigator :url="'/pages/index/trickDetail?id=' + item.msgId + '&type=2'" hover-class="none">
						<view class="left">
							<image :src="item2" mode="aspectFill" v-for="(item2,index2) in item.memberHeadImgs" :key="index2"></image>
							<!-- 已赞显示 -->
							<text v-if="item.memberHeadImgs.length == 5">已赞</text>
							<text v-if="item.memberHeadImgs.length == 4" class="four">已赞</text>
							<text v-if="item.memberHeadImgs.length == 3" class="three">已赞</text>
							<text v-if="item.memberHeadImgs.length == 2" class="two">已赞</text>
							<text v-if="item.memberHeadImgs.length == 1" class="one">已赞</text>
						</view>
					</navigator>
					<view class="right">
						<view class="one">
							<image src="../../imges/zan.png" mode="aspectFill" v-if="item.goodFlag == 1" @tap="handleLike(item.msgId,1,1)"></image>
							<image src="../../imges/zan1.png" mode="aspectFill" v-if="item.goodFlag == 0" @tap="handleLike(item.msgId,0,1)"></image>
							&nbsp;<text>{{item.goodNum}}</text>
						</view>
						&nbsp;&nbsp;
						<navigator class="two" :url="'/pages/index/trickDetail?id=' + item.msgId" hover-class="none">
							<image src="../../imges/pinglun.png" mode="aspectFill"></image>
							&nbsp;<text>{{item.commentsNum}}</text>
						</navigator>
					</view>
				</view>
				<!-- 评论列表 -->
				<!-- 进帖子详情 -->
				<navigator :url="'/pages/index/trickDetail?id='+ item.msgId" hover-class="none" v-if="item.commentDtoList.length != 0">
					<view class="commit_list">
						<view class="item" v-for="(item6,index3) in item.commentDtoList" :key="index3">
							<text :class="[item6.realName.length > 5 &&  item6.picturesUrl.length > 0 ? 'name name1' : 'name']">{{item6.realName}}</text>
							<view class="img" v-if="item6.picturesUrl.length > 0">
								<image src="../../imges/chaimg.png" mode="aspectFill"></image> <text>查看图片</text>
							</view>
							<text class="t_comm">{{item6.content}}</text>
						</view>
						<view class="footer" v-if="item.commentsCount != 0">
							查看全部{{item.commentsNum}}条评论及回复 <text>></text>
						</view>
					</view>
				</navigator>
			</view>
			<!-- 列表展示（发现） -->
			<view class="find_list" v-if="activeTab == 2">
				<view class="find_item" v-for="(item,index) in findList" :key="index">
					<!-- 加圈子按钮 -->
					<navigator :url="'/pages/index/detail?id='+ item.circleId" hover-class="none">
						<view class="btn">
							<image src="../../imges/jiaru.png" mode="aspectFill"></image>
						</view>
					</navigator>
					<view class="top">
						<navigator :url="'/pages/index/detail?id='+ item.circleId" hover-class="none" class="one">
							<image :src="item.circleHeadUrl" mode="aspectFill"></image>
						</navigator>
						<navigator :url="'/pages/index/detail?id='+ item.circleId" hover-class="none" class="two">
							<view class="first">
								{{item.circleName}}
							</view>
							<view class="srcond">
								{{item.circleDesc}}
							</view>
							<view class="three">
								<view v-for="(item1,index) in item.friendsLists" :key="index">
									<text class="item" v-if="index==0">{{item1}}</text>
								</view>
							</view>
						</navigator>
					</view>
					<view class="bottom">
						<view class="left">
							<navigator :url="'/pages/index/personal?id=' + item.createUid" class="one" hover-class="none">
								<image :src="item.createHeadUrl" mode="aspectFill"></image>
							</navigator>
							<view class="two">
								<navigator :url="'/pages/index/personal?id=' + item.createUid" class="title" hover-class="none">
									{{item.createName}}
								</navigator>
								<view class="dest">
									{{item.companyName}}
								</view>
							</view>
						</view>
						<view class="right">
							<view class="imgs">
								<image :src="item2" mode="aspectFill" v-for="(item2,index2) in item.memberHeadImgs" :key="index2" :class="[item.memberHeadImgs.length == 3 ? 'imgsss' : 'imgss']">
							</view>
							<text>成员{{item.memberNum}} &nbsp; 帖子{{item.postNum}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 创建圈子 -->
		<navigator url="/pages/index/found_1" hover-class="none" class="jiaQuan" v-if="activeTab == 2">
			<image src="../../imges/jia.png" mode="aspectFill"></image>
		</navigator>
		<!-- 创建及管理圈子入口 -->
		<!-- 创建管理圈子模块 -->
		<view class="child66" v-if="zhe_zhao">
			<view class="jiao">
			</view>
			<navigator url="/pages/index/found_1" class="one" hover-class="none">
				创建圈子
			</navigator>

			<navigator url="/pages/index/manage" class="two" hover-class="none">
				管理圈子
			</navigator>
		</view>
		<!-- 举报编辑删除帖子弹窗 -->
		<view :class="[is_show == true ? 'main66' : '']" @tap.stop="showNo" @touchstart.stop.prevent="showNo">
		</view>
		<!-- 创建管理圈子弹窗 -->
		<view :class="[zhe_zhao == true ? 'main66' : '']" @tap.stop="handleCloseZhe" @touchstart.stop.prevent="handleCloseZhe">
		</view>
	</view>
</template>
<script>
import request from "../../utils/request.js";
let jweixin = require("jweixin-module"); //引入配置
// npm install jweixin-module --save  //下载插件
export default {
  data() {
    return {
      activeTab: 2,
      is_show: false, //编辑删除
      zhe_zhao: false, //创建圈子遮罩
      scrollTop: false,
      findList: [], //发现圈子列表
      exploreList: [], //探索圈子
      attentionList: [], //关注圈子
      pageSize: 10,
      joinCircleList: [], //加入的圈子
      bottom: false,
      noMore: false,
      loading: true,
    };
  },
  onShow() {
    // uni.setStorageSync('token', 'eyJhbGciOiJIUzI1NiJ9.eyJqdGkiOiI0MjU3ZDI2MGZiZWYxMWVhYTMxMjAwMTYzZTA1ZmY2NiIsImlhdCI6MTYwODI3NDI0Nywic3ViIjoiMTc2MzA5MjUwMDkifQ.eaaSmJfWYts5iSqIp8XYsxZKmv4PRN3Qwkipl7V-4L0');
    if (this.exploreList.length != 0) {
      this.exploreList.forEach((v) => {
        v.is_show = false;
      }); //遮罩消失
    }
    if (this.attentionList.length != 0) {
      this.attentionList.forEach((v) => {
        v.is_show = false;
      });
    }
    this.is_show = false;
    this.zhe_zhao = false; //遮罩消失
    this.bottom = false;
    this.setQuanList(); //加入圈子
  },
  onPullDownRefresh() {
    if (this.activeTab == 1 || this.activeTab == 2) {
      setTimeout(() => {
        uni.stopPullDownRefresh();
      }, 500);
      return false;
    } else if (this.activeTab == 0) {
      this.bottom = false;
      this.pageNumber = 1;
      this.attention();
      setTimeout(() => {
        uni.stopPullDownRefresh();
        uni.showToast({
          title: "刷新成功",
          duration: 2000,
          icon: "none",
        });
      }, 1000);
    }
  },
  onReachBottom() {
    if (this.activeTab == 1 || this.activeTab == 2) {
      return false;
    } else if (this.activeTab == 0) {
      this.bottom = true;
      uni.showLoading({
        title: "加载中",
      });
      this.pageSize = this.pageSize + 10;
      this.attention();
    }
  },
  onLoad() {
    this.configWeiXin(); //调用公众号网页配置
    //this.exploreFriends(); //探索圈子
    this.findQuanList(); //发现圈子
    //	this.setQuanList(); //我加入的
    //	this.attention(); //关注圈子
  },
  methods: {
    hanldeDelete(id, id1) {
      //帖子删除
      this.is_show = false;
      this.attentionList.forEach((e) => {
        e.is_show = false;
      });
      uni.showModal({
        title: "提示",
        content: "是否确定删除该条帖子",
        confirmColor: "#000000",
        cancelColor: "#007aff",
        cancelText: "再想想",
        success: (e) => {
          if (e.confirm) {
            let token = uni.getStorageSync("token");
            // console.log(token, 'token')
            if (!token) {
              uni.showToast({
                title: "请授权登录再操作",
                duration: 2000,
                icon: "none",
              });
            } else {
              request({
                url: "app/activity/orgDeleteAct?uid=",
                method: "post",
                header: {
                  "Content-Type": "application/json",
                  "api-client": "72e0fee8172411ea995200163e05ff66",
                  "api-version": "1.3.3",
                  "Source-Type": 7,
                  token: token,
                },
                data: {
                  relationId: id,
                  type: 13,
                  orgId: id1,
                },
              }).then((res) => {
                // console.log(res, '删除帖子')
                if (res.data.code == 200) {
                  this.loading = false;
                  uni.showToast({
                    title: "删除成功",
                    duration: 1000,
                    icon: "none",
                  });
                  setTimeout(() => {
                    this.attention();
                  }, 10);
                } else {
                  uni.showToast({
                    title: res.data.msg,
                    duration: 2000,
                    icon: "none",
                  });
                }
              });
            }
          }
        },
      });
    },
    handleLike(id, index, item) {
      //帖子点赞
      if (this.activeTab == 0) {
        this.bottom = false;
      }
      let token = uni.getStorageSync("token");
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作",
          duration: 2000,
          icon: "none",
        });
      } else {
        request({
          url: "app/appUserThumbs/thumbs",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            thumbsId: id,
            type: 13,
            status: index,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            if (item == 0) {
              this.loading = false;
              this.attention();
              setTimeout(() => {
                if (index == 0) {
                  uni.showToast({
                    title: "点赞成功",
                    duration: 1000,
                    icon: "none",
                  });
                } else if (index == 1) {
                  uni.showToast({
                    title: "取消点赞成功",
                    duration: 1000,
                    icon: "none",
                  });
                }
              }, 2);
            } else {
              this.exploreFriends(); //探索
              setTimeout(() => {
                if (index == 0) {
                  uni.showToast({
                    title: "点赞成功",
                    duration: 1000,
                    icon: "none",
                  });
                } else if (index == 1) {
                  uni.showToast({
                    title: "取消点赞成功",
                    duration: 1000,
                    icon: "none",
                  });
                }
              }, 2);
            }
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    handleunConcern(id) {
      //不感兴趣
      let token = uni.getStorageSync("token");
      uni.showLoading({
        title: "加载中",
      });
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作",
          duration: 2000,
          icon: "none",
        });
      } else {
        request({
          url: "app/friends/userDislike",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            type: 13,
            uninterestedId: id,
          },
        }).then((res) => {
          uni.hideLoading();
          if (res.data.code == 200) {
            this.exploreList.forEach((v) => {
              v.is_show = false;
            });
            this.is_show = false;
            this.exploreFriends();
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    setQuanList() {
      //加入创建圈子列表
      let token = uni.getStorageSync("token");
      if (token) {
        request({
          url: "app/orgCircle/myJoinCircle",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            pageNumber: 1,
            pageSize: 9,
            type: 0,
          },
        }).then((res) => {
          // console.log(res, '加入圈子')
          if (res.data.code == 200) {
            if (res.data.data.rows.length == 9) {
              this.joinCircleList = [
                {
                  name: res.data.data.rows.slice(0, 2),
                },
                {
                  name: res.data.data.rows.slice(2, 4),
                },
                {
                  name: res.data.data.rows.slice(4, 6),
                },
                {
                  name: res.data.data.rows.slice(6, 8),
                },
                {
                  name: [...res.data.data.rows.slice(8, 9), ""],
                },
              ];
              // console.log(this.joinCircleList)
            } else if (res.data.data.rows.length == 8) {
              this.joinCircleList = [
                {
                  name: res.data.data.rows.slice(0, 2),
                },
                {
                  name: res.data.data.rows.slice(2, 4),
                },
                {
                  name: res.data.data.rows.slice(4, 6),
                },
                {
                  name: res.data.data.rows.slice(6, 8),
                },
              ];
            } else if (res.data.data.rows.length == 7) {
              this.joinCircleList = [
                {
                  name: res.data.data.rows.slice(0, 2),
                },
                {
                  name: res.data.data.rows.slice(2, 4),
                },
                {
                  name: res.data.data.rows.slice(4, 6),
                },
                {
                  name: res.data.data.rows.slice(6, 7),
                },
              ];
            } else if (res.data.data.rows.length == 6) {
              this.joinCircleList = [
                {
                  name: res.data.data.rows.slice(0, 2),
                },
                {
                  name: res.data.data.rows.slice(2, 4),
                },
                {
                  name: res.data.data.rows.slice(4, 6),
                },
              ];
            } else if (res.data.data.rows.length == 5) {
              this.joinCircleList = [
                {
                  name: res.data.data.rows.slice(0, 2),
                },
                {
                  name: res.data.data.rows.slice(2, 4),
                },
                {
                  name: res.data.data.rows.slice(4, 5),
                },
              ];
            } else if (res.data.data.rows.length == 4) {
              this.joinCircleList = [
                {
                  name: res.data.data.rows.slice(0, 2),
                },
                {
                  name: res.data.data.rows.slice(2, 4),
                },
              ];
            } else if (res.data.data.rows.length == 3) {
              this.joinCircleList = [
                {
                  name: res.data.data.rows.slice(0, 2),
                },
                {
                  name: res.data.data.rows.slice(2, 3),
                },
              ];
            } else if (res.data.data.rows.length == 2) {
              this.joinCircleList = [
                {
                  name: res.data.data.rows.slice(0, 2),
                },
              ];
            } else if (res.data.data.rows.length == 1) {
              this.joinCircleList = [
                {
                  name: res.data.data.rows.slice(0, 1),
                },
              ];
            }
          } else if (res.data.code == 401) {
            uni.showToast({
              title: "登录失效，正重新授权",
              duration: 2000,
              icon: "none",
            });
            this.configWeiXin(); //授权
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    attention() {
      //关注圈子
      let token = uni.getStorageSync("token");
      if (this.loading) {
        uni.showLoading({
          title: "加载中",
        });
      }
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作",
          duration: 2000,
          icon: "none",
        });
      } else {
        request({
          url: "app/orgMessage/attention",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            pageNumber: 1,
            pageSize: this.pageSize,
          },
        }).then((res) => {
          if (this.loading) {
            uni.hideLoading();
          }
          if (res.data.code == 200) {
            this.attentionList = res.data.data.rows.map((v) => {
              v.is_show = false;
              v.is_video = false;
              v.is_content = false;
              return v;
            });
            this.attentionList.forEach((v) => {
              if (v.comments.length > 3) {
                v.comments.length = 3;
              }
              if (v.thumbsList.length > 5) {
                v.thumbsList.length = 5;
              }
              if (v.imgCollection.length > 0) {
                //不止一张
                v.imgCollection.forEach((value, index) => {
                  if (value.fileType == 3) {
                    //有视频
                    v.is_video = true;
                  }
                });
              }
              if (v.content.length > 75) {
                v.content = v.content.substring(0, 70);
                v.is_content = true;
              }
            });
            if (res.data.data.total == 0) {
              uni.hideLoading();
              return false;
            }
            if (
              this.attentionList.length >= res.data.data.total &&
              this.bottom
            ) {
              uni.hideLoading();
              uni.showToast({
                title: "没有更多数据了",
                duration: 1000,
                icon: "none",
              });
              return false;
            } else if (
              this.attentionList.length < res.data.data.total &&
              this.bottom
            ) {
              uni.hideLoading();
              uni.showToast({
                title: "加载完成",
                duration: 1000,
                icon: "none",
              });
            }
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    imgsDa(imgs, index) {
      //点击图片放大
      // console.log(imgs,index)
      let arrImg = [];
      imgs.forEach((v) => {
        arrImg.push(v.fileUrl);
      });
      uni.previewImage({
        urls: arrImg,
        current: index,
        loop: true,
      });
    },
    exploreFriends() {
      //探索圈子
      let token = uni.getStorageSync("token");
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作",
          duration: 2000,
          icon: "none",
        });
      } else {
        request({
          url: "app/friends/exploreFriends",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            this.exploreList = res.data.data.map((v) => {
              v.is_show = false;
              v.is_video = false;
              v.is_content = false;
              return v;
            });
            this.exploreList.forEach((v) => {
              if (v.commentDtoList.length > 3) {
                v.commentDtoList.length = 3;
              }
              if (v.memberHeadImgs.length > 5) {
                v.memberHeadImgs.length = 5;
              }
              if (v.postImgDtoList.length > 0) {
                //不止一张
                v.postImgDtoList.forEach((value, index) => {
                  if (value.fileType == 3) {
                    //有视频
                    v.is_video = true;
                  }
                });
              }
              if (v.content.length > 75) {
                v.content = v.content.substring(0, 70);
                v.is_content = true;
              }
            });
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    //jdk配置
    configWeiXin() {
      let _this = this;
      //获取公众号配置
      request({
        //获取appid
        url: "wechat/portal/jsapiSignature/",
        method: "POST",
        header: {
          "Content-Type": "application/json",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": "1.3.3",
          "Source-Type": 7,
          // 'Referer' : 'https://test.yiqilaiwang.com'
        },
        data: {
          url: window.location.href.split("#")[0], //后台通过域名进行授权
        },
      }).then((res) => {
        var jsApiList = [
          "onMenuShareAppMessage",
          "onMenuShareTimeline",
          "updateAppMessageShareData",
          "updateTimelineShareData",
          "hideOptionMenu",
          "showOptionMenu",
        ];
        if (res.statusCode == 200) {
          //获取成功
          jweixin.config({
            debug: false, // 开启调试模式，发布的时候改为false
            appId: res.data.appId, // 必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.signature, // 必填，签名
            jsApiList: jsApiList, // 必填，需要使用的JS接口列表
          });

          jweixin.ready(function () {
            //配置成功
            _this.wxJsdkAuthorize(res.data.appId); //调用公众号-授权
          });
        } else {
          uni.showToast({
            title: res.data.msg,
            duration: 2000,
            icon: "none",
          });
        }
      });
    },
    //公众号授权
    wxJsdkAuthorize(_appid) {
      //授权时会跳到微信的页面，然后会自动调回来带着一个code
      let link = window.location.href;
      let _code = "";
      if (link.includes("code=")) {
        _code = link.split("code=")[1].split("&")[0];
      }
      // 如果拿到_code，传到后台
      if (_code) {
        console.log(_code, "打印code");
        request({
          url: "h5/loginapptoken/getOpenId", //拿oponid
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
          },
          data: {
            code: _code,
          },
        }).then((res) => {
          // console.log(res, '获取oponId')
          if (res.data.code == 200) {
            if (res.data.data.isLogin == false) {
              uni.navigateTo({
                url:
                  "/pages/index/verifyPhone?openId=" +
                  res.data.data.openId +
                  "&accessToken=" +
                  res.data.data.accessToken,
              });
            } else {
              // uni.showToast({
              // 	title: '登录成功',
              // 	duration: 1500,
              // 	icon: 'none'
              // });
              uni.setStorageSync("token", res.data.data.token); //缓存token'
              uni.setStorageSync("personal", res.data.data);
              this.exploreFriends(); //加载探索圈子
              this.findQuanList(); //发现圈子
              this.setQuanList(); //加入的圈子
            }
          } else {
            uni.showToast({
              title: "微信授权失效，请关闭重试",
              duration: 2000,
              icon: "none",
            });
          }
        });
      } else {
        let appid = _appid;
        let uri = encodeURIComponent(link);
        let authURL = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`;
        window.location.href = authURL;
      }
    },
    handleTab(index) {
      //tab栏切换
      this.activeTab = index;
      if (index == 2) {
        this.findQuanList(); //发现圈子
      } else if (index == 1) {
        this.exploreFriends(); //探索圈子
      } else if (index == 0) {
        this.bottom = false;
        this.attention(); //关注圈子
      }
    },
    handleLookZhe() {
      this.zhe_zhao = true;
    },
    handleCloseZhe(num) {
      this.zhe_zhao = false;
    },
    showNo() {
      //点赞遮罩事件
      this.exploreList.forEach((e) => {
        e.is_show = false;
      });
      this.attentionList.forEach((e) => {
        e.is_show = false;
      });
      this.is_show = false;
    },
    showZhi(index) {
      //控制点击哪条
      if (this.activeTab == 1) {
        this.exploreList.forEach((e) => {
          e.is_show = false;
        });
        this.is_show = true;
        this.exploreList[index].is_show = true;
      } else if (this.activeTab == 0) {
        this.attentionList.forEach((e) => {
          e.is_show = false;
        });
        this.is_show = true;
        this.attentionList[index].is_show = true;
      }
    },
    findQuanList() {
      //发现圈子列表
      let token = uni.getStorageSync("token");
      uni.showLoading({
        title: "加载中",
      });
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作",
          duration: 2000,
          icon: "none",
        });
        // this.configWeiXin() //授权登录
      } else {
        request({
          url: "app/friends/discoverFriends",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {},
        }).then((res) => {
          uni.hideLoading();
          if (res.data.code == 200) {
            this.findList = res.data.data;
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
  },
  onPageScroll(e) {
    //滚动事件
    if (e.scrollTop >= 135) {
      this.scrollTop = true;
    } else {
      this.scrollTop = false;
    }
  },
};
</script>

<style scoped lang="less">
.kong_ {
  background-color: #eee;
  display: flex;
  justify-content: center;
  height: 100rpx;
  align-items: center;

  image {
    width: 35rpx;
    height: 35rpx;
    margin-right: 10rpx;
  }

  text {
    font-size: 30rpx;
  }
}

.wu_Huo {
  margin-top: 300rpx;
  padding-bottom: 300rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  image {
    width: 330rpx;
    height: 260rpx;
  }

  text {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(136, 136, 136, 1);
    line-height: 37px;
  }
}

.three66 {
  position: absolute;
  top: 90rpx;
  right: 6rpx;
  width: 180rpx;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
  z-index: 66666666;

  .one1 {
    padding: 15rpx 0;
    font-size: 28rpx;
    width: 100%;
    text-align: center;
    border-bottom: 2rpx solid #eee;
  }

  .one1:last-child {
    border-bottom: none;
  }

  .jiao {
    height: 0;
    width: 0;
    border-bottom: 15rpx solid #fff;
    border-left: 7.5rpx solid transparent;
    border-right: 7.5rpx solid transparent;
    position: absolute;
    right: 16rpx;
    top: -15rpx;
  }
}

.three88 {
  top: 60rpx;
}

.main66 {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  background: rgba(0, 0, 0, 0.2);
}

.active66 {
  width: 100%;
  background-color: #fff;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 108rpx;
  box-sizing: border-box;
  height: 80rpx;
}

.jiaQuan {
  width: 90rpx;
  height: 90rpx;
  position: fixed;
  bottom: 80rpx;
  right: 35rpx;
  z-index: 99999999;

  image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
}

.main > .top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 25rpx 32rpx;
  box-sizing: border-box;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(0, 0, 0, 1);
  align-items: center;
  // border-bottom: 2rpx solid #DDDDDD;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 666;

  .left_ {
    display: flex;
    align-items: center;

    text {
      display: inline-block;
      margin-top: -10rpx;
      font-size: 32rpx;
    }

    image {
      width: 40rpx;
      height: 40rpx;
    }

    .shu_xian {
      width: 2rpx;
      height: 28rpx;
      background-color: #eee;
      margin: 0 28rpx;
    }
  }

  .right_ {
    display: flex;
    flex-direction: column;
    align-items: center;

    image {
      width: 40rpx;
      height: 40rpx;
    }

    text {
      font-size: 22rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #2a2a2a;
    }
  }
}

.main > .top1 {
  padding: 24rpx 32rpx;
  margin-top: 110rpx;
  background-color: rgba(248, 248, 250, 1);
  border-radius: 4rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 36rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);

  .right {
    width: 44rpx;
    height: 44rpx;
    background: rgba(255, 255, 255, 1);
    border-radius: 22rpx;
    border: 2rpx solid rgba(238, 238, 238, 1);
    text-align: center;
    line-height: 22rpx;
  }
}

.main .swiper {
  height: 172rpx;

  .swiper1 {
    height: 100%;
  }

  .father {
    background: rgba(248, 248, 250, 1);
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 0 30rpx;
    box-sizing: border-box;
  }
}

.main .swiper .father .child {
  width: 335rpx;
  height: 130rpx;
  background: rgba(255, 255, 255, 1);
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  // justify-content: space-between;
  padding: 0 20rpx;
  box-sizing: border-box;
  margin-top: -10rpx;

  image {
    width: 62rpx;
    height: 62rpx;
    border-radius: 50%;
    margin-right: 10rpx;
  }
}

.main .swiper .father .child6 {
  width: 335rpx;
  height: 130rpx;
  border-radius: 12rpx;
  margin-top: -10rpx;

  image {
    width: 100%;
    height: 100%;
  }
}

.main .swiper .father .child text {
  display: inline-block;
  width: 210rpx;
  font-size: 30rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.content {
  padding: 20rpx 32rpx;
  box-sizing: border-box;

  .tab {
    padding: 0 80rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .item {
      font-size: 30rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
    }
  }
}

.content .tab .active {
  font-size: 38rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  position: relative;

  .biao {
    display: inline-block;
    width: 40rpx;
    height: 6rpx;
    background: rgba(33, 104, 235, 1);
    border-radius: 4rpx;
    position: absolute;
    bottom: -8rpx;
    left: 20rpx;
  }
}

.content .itemList {
  margin-top: 30rpx;
  padding-bottom: 22rpx;
  position: relative;

  // 分割线
  .xian {
    height: 2rpx;
    background-color: rgba(238, 238, 238, 1);
    width: 750rpx;
    margin-left: -32rpx;
    position: absolute;
    bottom: 0;
  }

  // 省略号
  .text_ {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(70, 70, 70, 1);
    margin-top: 20rpx;
    position: relative;
    // height: 130rpx;
    line-height: 42rpx;

    text {
      display: inline-block;
      // width: 20rpx;
      margin-left: 2rpx;
      font-size: 30rpx;
    }

    .quan {
      display: inline-block;
      margin-left: 10rpx;
      font-size: 22rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #2168eb;
      line-height: 30rpx;
    }

    // overflow: hidden;
    // text-overflow: ellipsis;
    // display: -webkit-box;
    // -webkit-box-orient: vertical;
    // -webkit-line-clamp: 3;
  }

  // 图片
  .imgs {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-between;
    overflow: hidden;

    image {
      margin-top: 10rpx;
      width: 220rpx;
      height: 220rpx;
      border-radius: 8rpx;
      margin-right: 13rpx;
    }

    image:nth-child(3n) {
      margin-right: 0;
    }

    .myVideo {
      width: 100%;
      height: 400rpx;
    }
  }

  // 圈子入口
  .circle {
    margin-top: 15rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100rpx;
    padding: 20rpx;
    box-sizing: border-box;
    background: #fff7f2;
    border-radius: 12rpx;

    .right {
      width: 120rpx;
      height: 45rpx;
      background: rgba(255, 255, 255, 1);
      border-radius: 25rpx;
      border: 2rpx solid rgba(255, 113, 79, 1);
      text-align: center;
      line-height: 47rpx;
      font-size: 24rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(255, 113, 79, 1);
    }

    .left {
      display: flex;
      flex: 1;

      .one {
        height: 59rpx;
        width: 59rpx;
        margin-right: 15rpx;
        flex-shrink: 0;

        image {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }

      .two {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 24rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        margin-top: -6rpx;
        flex: 1;

        .bottom {
          font-size: 22rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(136, 136, 136, 1);
          margin-bottom: -6rpx;
        }

        .top {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
        }
      }
    }
  }

  .circle1 {
    background: #fff7f2;

    .right1 {
      width: 120rpx;
      height: 45rpx;
      background: linear-gradient(137deg, #ffc54f 0%, #ff6b4f 100%);
      border-radius: 25rpx;
      line-height: 45rpx;
      text-align: center;
      font-size: 24rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
    }
  }

  // 点赞评论
  .commit {
    height: 44rpx;
    margin-top: 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      font-size: 22rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      width: 500rpx;

      text {
        display: inline-block;
        margin-left: -60rpx;
        position: relative;
        top: -12rpx;
      }

      text.four {
        margin-left: -40rpx;
      }

      text.three {
        margin-left: -28rpx;
      }

      text.two {
        margin-left: -10rpx;
      }

      text.one {
        margin-left: 12rpx;
      }

      image {
        height: 44rpx;
        width: 44rpx;
        border-radius: 50%;
      }

      image:first-child {
        position: relative;
        z-index: 100;
      }

      image:nth-child(2) {
        position: relative;
        left: -20rpx;
        z-index: 99;
      }

      image:nth-child(3) {
        position: relative;
        left: -40rpx;
        z-index: 95;
      }

      image:nth-child(4) {
        position: relative;
        left: -60rpx;
        z-index: 92;
      }

      image:nth-child(5) {
        position: relative;
        left: -80rpx;
        z-index: 90;
      }
    }

    .right {
      display: flex;
      margin-top: 4rpx;

      .one image {
        width: 38rpx;
        height: 39rpx;
      }

      .two image {
        width: 38rpx;
        height: 35rpx;
        margin-left: 35rpx;
      }

      .one text,
      .two text {
        font-size: 22rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        margin-left: 6rpx;
        position: relative;
        top: -15rpx;
      }
    }
  }

  // 评论列表
  .commit_list {
    margin-top: 12rpx;
    background: rgba(248, 248, 250, 1);
    width: 100%;
    padding: 0 17rpx;
    box-sizing: border-box;

    .item {
      font-size: 26rpx;
      font-weight: 400;
      color: #333333ff;
      line-height: 37rpx;
      overflow: hidden;
      display: flex;
      align-items: center;

      .t_comm {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        width: 370rpx;
      }

      .name {
        color: rgba(80, 113, 173, 1);
        margin-right: 8rpx;
      }

      .name1 {
        width: 125rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
      }

      .img {
        display: flex;
        align-items: center;
        margin-right: 10rpx;

        image {
          margin-right: 7rpx;
          width: 30rpx;
          height: 25rpx;
        }

        text {
          font-size: 26rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #5071ad;
          // width: 100rpx;
        }
      }
    }

    .footer {
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(84, 116, 174, 1);
      line-height: 33rpx;

      text {
        display: inline-block;
        height: 16rpx;
        height: 10rpx;
        font-size: 30rpx;
        // position: relative;
        // bottom: -2rpx;
      }
    }
  }
}

.content .itemList:last-child .xian {
  display: none;
}

.content .itemList .top {
  display: flex;
  justify-content: space-between;

  > .right {
    .one {
      width: 30rpx;
      height: 6rpx;
      color: #333;
      font-weight: 700;
      margin-top: -16rpx;
      margin-right: 10rpx;
      // font-size: 50rpx;
      float: right;
    }

    .two {
      margin-top: 6rpx;
      position: relative;
      bottom: -20rpx;

      .zhiding {
        width: 54rpx;
        height: 30rpx;
        background: linear-gradient(
          319deg,
          rgba(244, 31, 48, 1) 0%,
          rgba(255, 101, 78, 1) 100%
        );
        border-radius: 8rpx;
        padding-right: 2rpx;
      }

      .jinghua {
        margin-left: 3rpx;
        width: 30rpx;
        height: 30rpx;
        background: linear-gradient(
          324deg,
          rgba(255, 164, 2, 1) 0%,
          rgba(253, 201, 0, 1) 100%
        );
        border-radius: 8rpx;
      }
    }
  }

  > .left {
    display: flex;

    .one {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 20rpx;
      flex-shrink: 0;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .two {
      display: flex;
      flex-direction: column;
      height: 80rpx;
      justify-content: space-between;

      .top1 {
        display: flex;
        width: 460rpx;

        text {
          display: inline-block;
          font-size: 24rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(136, 136, 136, 1);
          line-height: 33rpx;
          // width: 100rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
        }

        .name {
          margin-right: 15rpx;
          font-size: 28rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
        }
      }

      .bottom1 {
        font-size: 22rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        margin-top: -10rpx;
        color: rgba(136, 136, 136, 1);
      }
    }
  }
}

.content .find_list {
  margin-bottom: 40rpx;
  background: rgba(255, 255, 255, 1);

  .find_item {
    margin-top: 25rpx;
    width: 100%;
    height: 264rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2rpx 20rpx 0px rgba(0, 0, 0, 0.08);
    border-radius: 12rpx;
    padding: 20rpx;
    box-sizing: border-box;
    position: relative;

    .btn {
      width: 34rpx;
      height: 34rpx;
      position: absolute;
      top: 20rpx;
      right: 20rpx;

      image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    .top {
      display: flex;

      .one {
        width: 96rpx;
        height: 96rpx;
        margin-right: 22rpx;
        flex-shrink: 0;

        image {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }

      .two {
        .first {
          font-size: 32rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
          line-height: 45rpx;
          text-shadow: 0px 2rpx 20rpx rgba(0, 0, 0, 0.08);
        }

        .srcond {
          width: 460rpx;
          margin-top: 5rpx;
          font-size: 24rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(136, 136, 136, 1);
          line-height: 33rpx;
          text-shadow: 0px 2rpx 20rpx rgba(0, 0, 0, 0.08);
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
        }

        .three {
          margin-top: 3rpx;
          display: flex;
          flex-wrap: wrap;

          .item {
            margin-top: 5rpx;
            height: 26rpx;
            margin-right: 12rpx;
            padding: 0 9rpx;
            box-shadow: 0px 2rpx 20rpx 0px rgba(0, 0, 0, 0.08);
            border-radius: 13rpx;
            font-size: 18rpx;
            line-height: 25rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            text-shadow: 0px 2rpx 20rpx rgba(0, 0, 0, 0.08);
            white-space: nowrap;
            color: rgba(191, 108, 103, 1);
            background: rgba(255, 231, 228, 1);
          }
        }
      }
    }

    .bottom {
      display: flex;
      justify-content: space-between;
      width: 646rpx;
      position: absolute;
      left: 20rpx;
      bottom: 20rpx;
      padding-top: 18rpx;
      box-sizing: border-box;
      border-top: 2rpx solid #eee;

      .left {
        display: flex;

        .one {
          width: 60rpx;
          height: 60rpx;
          margin-right: 12rpx;

          image {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }

        .two {
          .title {
            font-size: 24rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
            line-height: 33rpx;
            text-shadow: 0px 2rpx 20rpx rgba(0, 0, 0, 0.08);
          }

          .dest {
            position: relative;
            bottom: -6rpx;
            font-size: 20rpx;
            // font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(136, 136, 136, 1);
            line-height: 28rpx;
            text-shadow: 0px 2rpx 20rpx rgba(0, 0, 0, 0.08);
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            width: 280rpx;
          }
        }
      }

      .right {
        display: flex;
        margin-top: 18rpx;

        .imgs {
          display: flex;
          margin-right: 15rpx;

          image {
            height: 30rpx;
            width: 30rpx;
            border-radius: 50%;
          }

          image.imgsss:first-child {
            position: relative;
            right: -28rpx;
            z-index: 77;
          }

          image.imgsss:nth-child(2) {
            position: relative;
            right: -13rpx;
            z-index: 88;
          }

          image.imgsss:nth-child(3) {
            position: relative;
            z-index: 99;
          }

          // 两张图
          image.imgss:nth-child(1) {
            position: relative;
            right: -13rpx;
            z-index: 88;
          }

          image.imgss:nth-child(2) {
            position: relative;
            z-index: 99;
          }
        }

        text {
          font-size: 24rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(136, 136, 136, 1);
          line-height: 33rpx;
          text-shadow: 0px 2rpx 20rpx rgba(0, 0, 0, 0.08);
        }
      }
    }
  }
}

.child66 {
  position: fixed;
  top: 205rpx;
  right: 35rpx;
  width: 180rpx;
  height: 160rpx;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
  z-index: 99999999;

  .one {
    height: 50%;
    line-height: 90rpx;
    font-size: 28rpx;
    width: 100%;
    text-align: center;
    border-bottom: 2rpx solid #eee;
  }

  .two {
    height: 50%;
    line-height: 70rpx;
    font-size: 28rpx;
    width: 100%;
    text-align: center;
  }

  .jiao {
    height: 0;
    width: 0;
    border-bottom: 15rpx solid #fff;
    border-left: 7.5rpx solid transparent;
    border-right: 7.5rpx solid transparent;
    position: absolute;
    right: 16rpx;
    top: -15rpx;
  }
}
</style>
